import React, { Component } from 'react';
import './Draw.css'
class Draw extends Component {

    //状态 数据
    state={
        r:0,
        g:0,
        b:0
    }

    //获取颜色的方法
    getcolor=(color)=>{
        return (e)=>{
            this.setState({
                //接收的变量color进入对象中当属性名用【】括住
                [color]:e.target.value
            })
        }
    }

    render() {
        //解构赋值r,g,b
        let {r,g,b}=this.state;
        return (
            <div className='draw' >
                {/* background:`rgb(${r},${g},${b})` 行内样式背景色 */}
                <div className='show' style={{background:`rgb(${r},${g},${b})`}}  ></div>
                R:<input type="range" min="0" max="255" value={r} onChange={this.getcolor("r")} /><br/><br/>
                G:<input type="range" min="0" max="255" value={g} onChange={this.getcolor("g")} /><br/><br/>
                B:<input type="range" min="0" max="255" value={b} onChange={this.getcolor("b")} /><br/><br/>
           </div>
        );
    }
}

export default Draw;